/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Button, Input, Tag, Select,message } from 'antd';
import style from './Book_rqz.less';
import MyModal from '../../components/common/MyModal';
import Container from '../../components/common/Container';
import PublicService from '../../services/PublicService';
import MyTable from '../../components/common/MyTable';
import RqzModal from './sub/RqzModal';
import request from '../../utils/request';
import moment from 'moment'
import RqzCheckModel from './sub/RqzCheckModel';
import MyPagination from '../../components/common/MyPagination';
import RqzEditModel from './sub/RqzEditModel';
const Option = Select.Option;
class Book_rqz extends Component {
    state = {
        addModal: false,
        editModel:false,
        loading: false,
        visible: false,
        selectedRowKeys: [],
        companyId: "",
        selectedRows: [],
        dataSource: [
        ],
        pageIndex: 1,
        pageSize: 10,
        textval: "",
        columns: [
            {
                title: '序号',
                dataIndex: 'num',
                width: '3%',
                align: "center",
            },
            {
                title: '燃气公司',
                dataIndex: 'name1',
                width: '10%',
                align: "center",
                render: (text, record) => {
                    return <span>
                       {record.company.name}
                    </span>

                }
            },
            {
                title: "燃气供应站",
                dataIndex: 'name',
                width: '10%',
                align: "center",
                render: (text) => <span>{text ? text : '/'}</span>
            },
            {
                title: "社会统一信用代码",
                dataIndex: 'creditCode',
                width: '8%',
                align: "center",
                render: (text) => <span>{text ? text : '/'}</span>
            },
            {
                title: '供应站地址',
                width: '10%',
                dataIndex: 'place',
                align: "center",
            },
            {
                title: '等级',
                width: '8%',
                dataIndex: 'grade',
                align: "center",
            },
            {
                title: '燃气经营许可证期限',
                dataIndex: 'deadline',
                width: '10%',
                align: "center",
            },
            {
                title: '负责人',
                dataIndex: 'principal',
                width: '8%',
                align: "center",
            },
            {
                title: '联系方式',
                dataIndex: 'phone',
                width: '8%',
                align: "center",
            },
            {
                title: '账户名称',
                dataIndex: 'loginName',
                width: '8%',
                align: "center",
            },
            {
                title: '用户状态',
                dataIndex: 'status',
                width: '8%',
                align: "center",
                render: (text, record) => {
                    return <span>
                        {record.status === 0?'未开启':record.status === 1?'正常':'锁定'}
                    </span>

                }
            },
            {
                title: '操作',
                dataIndex: 'userName',
                width: '15%',
                align: "center",
                render: (text, record) => {
                    return <span>
                        <Tag color="#108ee9" onClick={this.onEdit.bind(this, record)}>编辑</Tag>
                        <Tag color="#87d068" onClick={this.onCheck.bind(this, record)}>查看</Tag>
                    </span>

                }
            },

        ]
    }

    componentDidMount() {
        this.save(1, 10)
    }

    //编辑按钮
    onEdit = (record) => {
        console.log(record)
        console.log(record)
        request({
            url: `/zhrq-web/gas/station/findOne?id=${record.id}`,
            method: 'GET',
        }).then(data => {
            console.log(data)
            if(data.rc == 0) {
                PublicService.setCookie('pid', record.id);
                data.ret.fileUploadList.forEach((item,index) => {
                    item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                })
                this.setState({
                    grade:data.ret.grade,
                    name:data.ret.name,
                    creditCode:data.ret.creditCode,
                    company:data.ret.company.id,
                    place:data.ret.place,
                    deadline:moment(data.ret.deadline),
                    principal:data.ret.principal,
                    loginName:data.ret.loginName,
                    phone:data.ret.phone,
                    fileUploadList:data.ret.fileUploadList,
                    editModel:true
                })
            }
        })
    }

    //查看按钮
    onCheck = (record) => {
        console.log(record)
        request({
            url: `/zhrq-web/gas/station/findOne?id=${record.id}`,
            method: 'GET',
        }).then(data => {
            console.log(data)
            if(data.rc == 0) {
                data.ret.fileUploadList.forEach((item,index) => {
                    item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                })
                this.setState({
                    grade:data.ret.grade,
                    name:data.ret.name,
                    creditCode:data.ret.name,
                    company:data.ret.company.name,
                    place:data.ret.place,
                    deadline:moment(data.ret.deadline),
                    principal:data.ret.principal,
                    loginName:data.ret.loginName,
                    phone:data.ret.phone,
                    fileUploadList:data.ret.fileUploadList,
                    checkModel:true
                })
            }
        })
    }

    //关键词搜索
    oninput = (e, b) => {

        this.setState({
            textval: e.target.value
        })
    }

    onSelectChange = (keys, rows) => {
        console.log(rows)
        this.setState({
            selectedRowKeys: keys,
            selectedRows: rows
        });
    };

    //新增保存按钮
    ModalOk = (val, type, v) => {
        console.log(val, type, v)
        val.company = {id:val.company}
        val.deadline = moment(val.deadline).format("YYYY-MM-DD")
        let data = {
            ...val,
            beenDeleted: 0
        }
        request({
            url: '/zhrq-web/gas/station/insertGasStation',
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                message.success("新增成功")
                this.save(1,10)
                this.setState({
                    addModal: false,
                })
            }
        })

    }
    //编辑保存按钮
    editModalOk = (val, type, v) => {
        console.log(val, type, v)
        val.company = {id:val.company}
        val.deadline = moment(val.deadline).format("YYYY-MM-DD")
        let data = {
            ...val,
            beenDeleted: 0
        }
        request({
            url: '/zhrq-web/gas/station/updateGasStation',
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                message.success("编辑成功")
                this.save(1,10)
                this.setState({
                    editModel: false,
                })
            }
        })

    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };


    //新增
    addBtnText = () => {
        request({
            url: '/zhrq-web/gas/station/insertGasStation',
            method: 'POST',
            data: { beenDeleted: 1 }
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                PublicService.setCookie('pid', data.ret.id);
                this.setState({
                   
                    addModal: true,
                });
            }
        })

    }

    //分页器
    onChangePage = (page, size) => {

        this.setState({
            page,
            rows: size,
            pageIndex: page,
            pageSize: size
        })
    };

    //下拉
    onselect = (v) => {
        this.setState({
            companyId: v
        })
    }

    //查询
    save = (page, rows) => {
        this.setState({
            loading:true
        })
        let data = {
            page,rows,
            companyId:this.state.companyId,
            key:this.state.textval
        }
        request({
            url: '/zhrq-web/gas/station/findPageList',
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                data.ret.items.forEach((item) => {
                    item.deadline=moment(item.deadline).format("YYYY-MM-DD")
                })

                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount,
                    loading:false
                })

            }
        })
    }

    //删除
    setDelConfirm = () => {
        let data = []
        this.state.selectedRows.forEach((item) => {
            data.push({
                id: item.id
            })
        })
        request({
            url: '/zhrq-web/gas/station/deleteList',
            method: 'POST',
            data: data
        }).then(data => {
            if (data.rc == 0) {
                message.success("删除成功")
                this.save(1, 10)
                this.setState({
                    selectedRowKeys: [],
                    selectedRows: [],
                })
            }
        })
    }

    selectedChange = (v) => {
        console.log(v)
    }
    


    render() {
        const { total, loading, selectedRowKeys, dataSource, pageIndex, pageSize, addModal, modalBtnLoading ,checkModel,editModel} = this.state
        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '86vh';
        if (windowWidth > 1367) {
            containerHeight = '86vh';
        }
        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const checkitems = [
            {
                type: 'input',
                label: "供应站名称",
                paramName: 'name',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.name
            },
            {
                type: 'input',
                label: "统一社会信用代码",
                paramName: 'creditCode',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.creditCode
            },
            {
                type: 'select',
                label: '所属燃气企业',
                paramName: 'company',
                placeholder: '请输入',
                span: 12,
                options: [
                    { value: '40288148685a978401685aa778b80003', text: '武汉金宏燃气有限公司' },
                    { value: '40288148685a978401685aa87e670004', text: '武汉民生优能火石油液化气有限公司' },
                    { value: '402881e9685998110168599904a50000', text: '武汉武煤百江燃气有限公司' },
                    { value: '402881e968599c020168599d1bfb0000', text: '武汉石化石油液化气股份有限公司' },
                ],
                initialValue:this.state.company
            },
            {
                type: 'select',
                label: '等级',
                paramName: 'grade',
                placeholder: '请输入',
                span: 12,
                options: [
                    { value: '一级站', text: '一级站' },
                    { value: '二级站', text: '二级站' },
                    { value: '三级站', text: '三级站' },
                   
                ],
                initialValue:this.state.grade
            },
            {
                type: 'input',
                label: '供应站地址',
                paramName: 'place',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.place
            },
            {
                type: 'DatePicker',
                label: '燃气经营许可证期限',
                paramName: 'deadline',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.deadline
            },
            {
                type: 'input',
                label: '负责人',
                paramName: 'principal',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.principal
            },
            {
                type: 'input',
                label: '联系方式',
                paramName: 'phone',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.phone
            },
            {
                type: 'input',
                label: '系统账户名称',
                paramName: 'loginName',
                placeholder: '请输入',
                width: 200,
                span: 12,
                initialValue:this.state.loginName
            },
            {
                type: 'Upload',
                label: '相关附件',
                paramName: 'fileUploadId',
                width: 200,
                span: 12
            },
        ];

        const items = [
            {
                type: 'input',
                label: "供应站名称",
                paramName: 'name',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: "统一社会信用代码",
                paramName: 'creditCode',
                placeholder: '请输入',
                width: 200,
                span: 12,
               
            },
            {
                type: 'select',
                label: '所属燃气企业',
                paramName: 'company',
                placeholder: '请输入',
                span: 12,
                options: [
                    { value: '40288148685a978401685aa778b80003', text: '武汉金宏燃气有限公司' },
                    { value: '40288148685a978401685aa87e670004', text: '武汉民生优能火石油液化气有限公司' },
                    { value: '402881e9685998110168599904a50000', text: '武汉武煤百江燃气有限公司' },
                    { value: '402881e968599c020168599d1bfb0000', text: '武汉石化石油液化气股份有限公司' },
                ]
            },
            {
                type: 'select',
                label: '等级',
                paramName: 'grade',
                placeholder: '请输入',
                span: 12,
                options: [
                    { value: '一级站', text: '一级站' },
                    { value: '二级站', text: '二级站' },
                    { value: '三级站', text: '三级站' },
                   
                ],
              
            },
            {
                type: 'input',
                label: '供应站地址',
                paramName: 'place',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'DatePicker',
                label: '燃气经营许可证期限',
                paramName: 'deadline',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '负责人',
                paramName: 'principal',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '联系方式',
                paramName: 'phone',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '系统账户名称',
                paramName: 'loginName',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'input',
                label: '系统账户密码',
                paramName: 'phone',
                placeholder: '请输入',
                width: 200,
                span: 12
            },
            {
                type: 'Upload',
                label: '相关附件',
                paramName: 'fileUploadId',
                width: 200,
                span: 12
            },
        ];

        return (
            <div>
                {
                     editModel &&
                     <RqzEditModel
                         // type={type}
                         visible={editModel}
                         title={"编辑"}
                         style={{ height: "80vh" }}
                         // modalBtnLoading={modalBtnLoading}
                         data={checkitems}
                         fileUploadList={this.state.fileUploadList}
                         footerShow={true}
                         selectedChange = {this.selectedChange}
                         onModalSave={this.editModalOk}
                         onCancel={this.ModalCancel.bind(this, 'editModel')}
 
                     />
                }
                 {
                    checkModel &&
                    <RqzCheckModel
                        // type={type}
                        visible={checkModel}
                        title={"查看"}
                        style={{ height: "80vh" }}
                        // modalBtnLoading={modalBtnLoading}
                        data={checkitems}
                        fileUploadList={this.state.fileUploadList}
                        footerShow={false}
                        onModalSave={this.checkModel}
                        onCancel={this.ModalCancel.bind(this, 'checkModel')}

                    />
                }
                {
                    addModal &&
                    <RqzModal
                        // type={type}
                        visible={addModal}
                        title={"新增"}
                        style={{ height: "80vh" }}
                        // modalBtnLoading={modalBtnLoading}
                        selectedChange = {this.selectedChange}
                        data={items}
                        footerShow={true}
                        onModalSave={this.ModalOk}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}

                    />
                }
                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col span={8}>
                            <span >燃气公司 : </span>
                            <Select defaultValue=" " style={{ width: 200 }} size="small" onChange={this.onselect}>
                                <Option value=" ">全部</Option>
                                <Option value="40288148685a978401685aa778b80003">武汉金宏燃气有限公司</Option>
                                <Option value="40288148685a978401685aa87e670004">武汉民生优能火石油液化气有限公司</Option>
                                <Option value="402881e9685998110168599904a50000">武汉武煤百江燃气有限公司</Option>
                                <Option value="402881e968599c020168599d1bfb0000">武汉石化石油液化气股份有限公司</Option>
                            </Select>
                        </Col>
                        <Col span={12} ><span >关键词 : </span> <Input onChange={this.oninput} size="small" placeholder="请输入" style={{ width: 200, marginRight: 20, marginLeft: 5 }} value={this.state.textval} />  <Button type="primary" size="small" onClick={this.save}>查询</Button> <Button size="small">重置</Button></Col>
                    </Row>

                </Card>

                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "-1vh", padding: "0px 0px" }}
                    // header={true}
                    addBtnShow={true}
                    addBtnText={this.addBtnText}
                    setDelConfirm={this.setDelConfirm}
                    deleteBtnShow={true}
                    lockBtnShow={true}
                    lockBtnText={this.lockBtnText}
                    clearlockBtnShow={true}
                    clearlockBtnText={this.clearlockBtnText}
                >
                    <div style={{ height: "72vh", overflow: "auto" }}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={this.state.columns}
                            rowSelection={rowSelection}
                            pagination={false}
                            // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination

                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />

                </Container>
            </div>
        )
    }
}
export default (Book_rqz);
